<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">设置我的资料</div>
        <div class="layui-card-body" pad15="">

            <form class="layui-form" lay-filter="basicData-from">
                <div class="layui-form-item">
                    <label class="layui-form-label">我的角色</label>
                    <div class="layui-input-inline">
                        <input type="text" th:value="${#strings.replace(user.roleNames,'[','').replace(']','')}" readonly="" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">当前角色不可更改为其它角色</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" th:value="${user.account}" readonly="" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">不可修改。一般用于后台登入名</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="nickname" th:value="${user.nickname}" lay-verify="nickname" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" lay-submit="" lay-filter="basicData">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/

    layui.use(['form'], function () {
        let form = layui.form;


        //自定义验证规则
        form.verify({
            confirmPassword: function(value){
                let data = form.val("basicData-from");
                if(value !== data.password){
                    return '两次密码不一致！';
                }
            },
            pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

        //监听提交
        form.on('submit(basicData)', function (data) {
            $.ajax({
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
                url: "/user/saveUserInfo",
                data: {"realname":data.field.realname,"sex":data.field.sex},
                success: function (result) {
                    if (result.code === 1) {
                        layer.msg('修改成功', {icon: 1, time: 2000});
                    } else {
                        layer.msg(result.message, {icon: 2, time: 1200});
                    }
                },
                error: function (e) {
                    layer.msg('网络错误', {icon: 2});
                }
            });
        });

    });
    /*]]>*/
</script>